<% layout('layout_header') -%>
<div class="row shadow span9">
      <div class="span5">
            <form action="/register" method="post" accept-charset="UTF-8" onsubmit="return CheckBeforeSubmission();">
                  <h3> Create an account </h3>
                  <h5 id="error" style="color:red;display:none"></h5>
                  <label> Name </label>
                  <input id="name" name="name" type="text" class="span4" placeholder="Name (optional)"/> <br>
                  <label> Email </label>
                  <input id="email" name ="email" type="email" class="span4" placeholder="Email address"/> <br>
                  <label> Password </label> 
                  <input id="password" name="password" type="password" class="span4" placeholder="Valid password"/> <br> 
                  <label> Confirm Password </label> 
                  <input id="confirm_password" name="confirm_password" type="password" class="span4" placeholder="Password again"/> <br> <br>
                  <button type="submit" class="btn btn-success">Create New Account</button> <br> <br>
                  <p>Already have an account?<a href="/login" rel="external">Login here</a> </p>
                  <p> By signing up, you are agreeing to our <a href="#myModal" data-toggle="modal"> Terms of Service </a></p>
            </form>
      </div>
      <div class="span3">
            <form action="/register" method="post" accept-charset="UTF-8" >
             <h3> Or sign in with  </h3>
             <button type="submit" class="btn btn-success">Google Account</button> <br>
            </form>
      </div>
</div> <!-- shadow -->

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Terms Of Service</h3>
  </div>
  
  <div class="modal-body">
       <%- partial('license.ejs') %>
  </div>
</div>   
<script type="text/javascript">
    function CheckBeforeSubmission()
    {
        $('#error1').hide();
        $('#error').show();
        if( ! $('#name').val() ) {
            $('#error').html('Please enter a name');
        } else if( ! $('#email').val() ) {
            $('#error').html('Please enter email address');
        } else if( ! $('#password').val() ) {
            $('#error').html('Please enter a password');
        } else if( ! $('#confirm_password').val() ) {
            $('#error').html('Please enter confirm password');
        }  else if( $('#password').val() != $('#confirm_password').val() ) {
            $('#error').html('Password & Confirm password doesnt match.Please try again');
        } else {
            return true;
        }
       return false;
    }
</script>